<template>
<div class="city top-page">
  <div class="top">
    <!-- 搜索框 -->
    <van-search v-model="searchValue" @cancel="cancelClick" :show-action="true" shape="round" placeholder="城市/区域/位置"></van-search>
    <van-tabs v-model:active="active" color="#f4ea2a" line-height="2" sticky>
        <template v-for="(value, key, index) in allCities" :key="key">
            <van-tab :title="value.title" :name="key"></van-tab>
        </template>
    </van-tabs>
  </div>
  <div class="content">
    <!-- <CityGroup :groupData="currentCityGroup"></CityGroup> -->
    <template v-for="(value,key,index) in allCities">
        <!-- <h2 v-show="active === key">{{ value.title }}</h2> -->
        <CityGroup  v-show="active === key" :groupData="value"></CityGroup>
    </template>
  </div>
</div>
</template>
<script setup>

    import { ref,computed } from 'vue'
    import { storeToRefs } from 'pinia';
    import { useRouter } from 'vue-router';
    import useCityStore from "@/store/modules/city"

    import CityGroup from './cpns/city-group.vue'
    const searchValue = ref("")
    const router = useRouter()
    const cancelClick = ()=>{
        router.back()
    }
    // tab的切换
    const active = ref(0)
    // 网络请求:请求城市的数据
    // const allCity = ref()
    // getCityAll().then(res=>{
    //     console.log(res,"啥啥啥");
    //     allCity.value = res.data
    // })
    // 从store中获取数据
    console.log(useCityStore());
    const cityStore = useCityStore();
    cityStore.fetchAllCitiesData()
    const {allCities} = storeToRefs(cityStore)

    // 目的:获取选中标签后的数据
    // 1.获取正确的key: 将tabs 中绑定的tabAction 正确绑定
    // 2.根key从allcities 获取数据，默认直接获取的数据不是响应式的，所以必须包裹computed
    const currentCityGroup = computed(()=> allCities.value[active.value]) 

</script> 
<style lang="less" scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
    // 隐藏tabbar
    .top-page{
       position: relative;
       z-index: 9;
       height: 100vh;
       background-color: #fff;
       overflow-y: auto; 
    }
    .city{
        // --van-tabs-line-height: 30px;
        // .top{
        //     position: fixed;
        //     top: 0;
        //     left: 0;
        //     right: 0;
        // }
        // .content{
        //     margin-top: 98px;
        // }
        .top{
            position: relative;
            z-index: 9;
        }
        // 布局滚动
        .content{
            height: calc(100vh - 98px);
            overflow-y: auto;
        }
    }
</style>